<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        type="textarea"
        v-model="listQuery.searchVins"
        :rows="3"
        placeholder="请输入vin号,多个请换行隔开"
        style="width: 250px;"
        class="filter-item"
      />
      <el-input
        type="textarea"
        v-model="listQuery.searchMaterialNos"
        :rows="3"
        placeholder="请输入物料号,多个请换行隔开"
        style="width: 250px;"
        class="filter-item"
      />
      <el-input
        v-model="listQuery.batchNo"
        placeholder="请输入批次号"
        style="width: 200px;"
        class="filter-item"
      />
      <el-cascader v-model="listQuery.tmBasUlocId" :options="options" :props="{value:'id', label:'name'}" :show-all-levels="false" placeholder="请选择报工点" class="filter-item" clearable></el-cascader>
      扫描时间:
      <el-date-picker
        v-model="listQuery.datetime"
        type="daterange"
        start-placeholder="扫描开始时间"
        end-placeholder="扫描结束时间"
        class="filter-item"
        @change="dateChange">
      </el-date-picker>
      <el-select v-model="listQuery.saleType" placeholder="请选择销售类型" clearable style="width: 200px" class="filter-item">
        <el-option v-for="item in saleTypeList" :key="item.codeValue" :label="item.name" :value="item.codeValue" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
      <el-button class="filter-item" type="info" icon="el-icon-refresh" @click="handleReset">重置</el-button>
      <el-button v-waves style="float:right;" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport">
        导出
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @row-click="showDetail"
    >
      <el-table-column align="center" label="VIN号" prop="vin" />
      <el-table-column align="center" label="白车身号" prop="frameNo" />
      <el-table-column align="center" label="白车身物料号" prop="bsMaterialNo" />
      <el-table-column align="center" label="油漆车身物料号" prop="psMaterialNo" />
      <el-table-column align="center" label="整车物料号" prop="materialNo" />
      <el-table-column align="center" label="整车物料描述" prop="materialDesc" />
      <el-table-column align="center" label="颜色">
        <template slot-scope="scope">
          <div>{{ scope.row.colorCode | colorFilter }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="车辆公告号" prop="vehiclePublicNoticeNo" />
      <el-table-column align="center" label="生产批次号" prop="batchNo" />
      <el-table-column align="center" label="生产订单号" prop="orderNo" />
      <el-table-column align="center" label="销售类型" prop="saleType" >
        <template slot-scope="scope">
          <div>{{ scope.row.saleType | saleTypeFilter }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="加工类型" prop="proType" >
        <template slot-scope="scope">
          <div>{{ scope.row.proType | proTypeFilter }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="出口国家" prop="targetountry" />
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
    <el-dialog
      title="车辆详细"
      :visible.sync="dialogVisible"
      width="80%">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-row>
              <el-col :span="9">VIN号:</el-col>
              <el-col :span="15">{{detailData.vin}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">白车身号:</el-col>
              <el-col :span="15">{{detailData.frameNo}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">白车身物料号:</el-col>
              <el-col :span="15">{{detailData.bsMaterialNo}}</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-row>
              <el-col :span="9">油漆车身物料号:</el-col>
              <el-col :span="15">{{detailData.psMaterialNo}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">整车物料号:</el-col>
              <el-col :span="15">{{detailData.materialNo}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">整车物料描述:</el-col>
              <el-col :span="15">{{detailData.materialDesc}}</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-row>
              <el-col :span="9">颜色:</el-col>
              <el-col :span="15">{{detailData.colorCode | colorFilter}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">车辆公告号:</el-col>
              <el-col :span="15">{{detailData.vehiclePublicNoticeNo}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">生产批次号:</el-col>
              <el-col :span="15">{{detailData.batchNo}}</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-row>
              <el-col :span="9">生产订单号:</el-col>
              <el-col :span="15">{{detailData.orderNo}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">销售类型:</el-col>
              <el-col :span="15">{{detailData.saleType | saleTypeFilter}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">加工类型:</el-col>
              <el-col :span="15">{{detailData.proType | proTypeFilter}}</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-row>
              <el-col :span="9">出口国家:</el-col>
              <el-col :span="15">{{detailData.targetountry}}</el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>焊装生产信息</span>
        </div>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-row>
              <el-col :span="9">车间代码:</el-col>
              <el-col :span="15">{{detailData.hzWorkShopNo}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">生产线代码:</el-col>
              <el-col :span="15">{{detailData.hzLineNo}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">10过点时间:</el-col>
              <el-col :span="15">{{detailData.hz10Time}}</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-row>
              <el-col :span="9">20过点时间:</el-col>
              <el-col :span="15">{{detailData.hz20Time}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">入焊涂BDC时间:</el-col>
              <el-col :span="15">{{detailData.k2Time}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">出焊涂BDC时间:</el-col>
              <el-col :span="15">{{detailData.k12Time}}</el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>涂装生产信息</span>
        </div>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-row>
              <el-col :span="9">车间代码:</el-col>
              <el-col :span="15">{{detailData.tzWorkShopNo}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">生产线代码:</el-col>
              <el-col :span="15">{{detailData.tzLineNo}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">10过点时间:</el-col>
              <el-col :span="15">{{detailData.tz10Time}}</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-row>
              <el-col :span="9">20过点时间:</el-col>
              <el-col :span="15">{{detailData.tz20Time}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">入涂总BDC时间:</el-col>
              <el-col :span="15">{{detailData.p1Time}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">出涂总BDC时间:</el-col>
              <el-col :span="15">{{detailData.p11Time}}</el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>总装生产信息</span>
        </div>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-row>
              <el-col :span="9">车间代码:</el-col>
              <el-col :span="15">{{detailData.zzWorkShopNo}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">生产线代码:</el-col>
              <el-col :span="15">{{detailData.zzLineNo}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">10过点时间:</el-col>
              <el-col :span="15">{{detailData.zz10Time}}</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-row>
              <el-col :span="9">发动机上线时间:</el-col>
              <el-col :span="15">{{detailData.engineScanTime}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">发动机/驱动电机号:</el-col>
              <el-col :span="15">{{detailData.engineNo}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">变速箱/电机控制器号:</el-col>
              <el-col :span="15">{{detailData.gearBoxNo}}</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-row>
              <el-col :span="9">动力总成/电池合装时间:</el-col>
              <el-col :span="15">{{detailData.powerAssemblyTime}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">20点过点时间:</el-col>
              <el-col :span="15">{{detailData.zz20Time}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">铭牌日期:</el-col>
              <el-col :span="15">{{detailData.storageTime}}</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-row>
              <el-col :span="9">合格证日期:</el-col>
              <el-col :span="15">{{detailData.certificationTime}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">合格证编号:</el-col>
              <el-col :span="15">{{detailData.certification}}</el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="9">30点入库时间:</el-col>
              <el-col :span="15">{{detailData.zz30Time}}</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-row>
              <el-col :span="9">生产备注:</el-col>
              <el-col :span="15">{{detailData.configurationtableNote + '&&' + detailData.certificationNode}}</el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
  .box-card {
    margin-top: 10px;
  }
  .el-row {
    margin-top: 5px;
  }
</style>
<script>
import { fetchList, fetchColorList } from '@/api/production/vehicle-detail-query'
import { fetchUlocList } from '@/api/production/router-log-query'
import { fetchCode } from '@/api/sys/sys-code'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import axios from "axios"
import underscore from 'underscore'
import { parseTime } from '@/utils'

let saleTypeList, proTypeList, colorList
export default {
  name: 'VehicleDetailQuery',
  directives: { waves },
  components: { Pagination },
  filters: {
    saleTypeFilter(type) {
      return type ? saleTypeList.find(a => a.codeValue === type).name : ''
    },
    proTypeFilter(type) {
      return type ? proTypeList.find(a => a.codeValue === type).name : ''
    },
    colorFilter(type) {
      return type ? colorList.find(a => a.codeValue === type).name : ''
    },
  },

  data() {
    return {
      // 查询
      listQuery: {
        page: 1,
        limit: 10,
        searchVins: undefined,
        batchNo: undefined,
        searchMaterialNos: undefined,
        tmBasUlocId: [],
        datetime: null,
        saleType: undefined
      },
      saleTypeList: [],
      proTypeList: [],
      colorList: [],
      options: [],
      // 表格
      list: null,
      total: 0,
      listLoading: false,
      // 车辆详细模态窗
      dialogVisible: false,
      detailData: {
        vin: '',
        frameNo: '',
        bsMaterialNo: '',
        psMaterialNo: '',
        materialNo: '',
        materialDesc: '',
        colorCode: '',
        vehiclePublicNoticeNo: '',
        batchNo: '',
        orderNo: '',
        saleType: '',
        proType: '',
        targetountry: '',
        hzWorkShopNo: '',
        hzLineNo: '',
        hz10Time: '',
        hz20Time: '',
        k2Time: '',
        k12Time: '',
        tzWorkShopNo: '',
        tzLineNo: '',
        tz10Time: '',
        tz20Time: '',
        p1Time: '',
        p11Time: '',
        zzWorkShopNo: '',
        zzLineNo: '',
        zz10Time: '',
        engineScanTime: '',
        engineNo: '',
        gearBoxNo: '',
        powerAssemblyTime: '',
        zz20Time: '',
        storageTime: '',
        certificationTime: '',
        certification: '',
        zz30Time: '',
        configurationtableNote: '',
        certificationNode: '',
      },
      // 导出
      downloadLoading: false
    }
  },
  created() {
    // 报工点
    fetchUlocList().then(res => {
      this.options = res.data
    })
    // 获取销售类型、加工类型、颜色
    axios.all([fetchCode('Key_Sale_Type'), fetchCode('Key_Product_Type'), fetchColorList()]).then(
      axios.spread((res1, res2, res3) => {
        saleTypeList = res1.data
        proTypeList = res2.data
        colorList = res3.data
        // 用于查询条件
        this.saleTypeList = saleTypeList
        this.proTypeList = proTypeList
        this.colorList = colorList
      })
    )
    
  },
  methods: {
    fetchData() {
      // 提交验证
      if (this.listQuery.tmBasUlocId.length === 0 && !this.listQuery.searchVins && !this.listQuery.batchNo && !this.listQuery.searchMaterialNos && !this.listQuery.datetime && !this.listQuery.saleType) {
        this.$message.warning('查询条件不能为空')
        return
      }
      this.listLoading = true
      const data = underscore.omit(this.listQuery, 'datetime', 'tmBasUlocId', 'searchVins', 'searchMaterialNos')
      // 数据格式化提交
      if (this.listQuery.datetime !== null) {
        data.beginDate = parseTime(this.listQuery.datetime[0], '{y}-{m}-{d}')
        data.endDate = parseTime(this.listQuery.datetime[1], '{y}-{m}-{d}')
      }
      if (this.listQuery.tmBasUlocId.length !== 0) {
        data.tmBasUlocId = this.listQuery.tmBasUlocId[2]
      }
      if (this.listQuery.searchVins) {
        data.searchVins = this.listQuery.searchVins.split(/\s/).filter(a => a !== '')
      }
      if (this.listQuery.searchMaterialNos) {
        data.searchMaterialNos = this.listQuery.searchMaterialNos.split(/\s/).filter(a => a !== '')
      }
      fetchList(data).then(res => {
        this.list = res.data.list
        this.total = res.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.fetchData()
    },
    handleReset() {
      this.listQuery ={
        page: 1,
        limit: 10,
        searchVins: undefined,
        batchNo: undefined,
        searchMaterialNos: undefined,
        tmBasUlocId: [],
        datetime: null,
        saleType: undefined
      }
    },
    dateChange(date) {
      if (date) {
        const startDate = date[0]
        const endDate = date[1]
        if (endDate.valueOf() - startDate.valueOf() > 30 * 24 * 60 * 60 * 1000) {
          this.$message.warning('时间范围超过了30天，请重新选择！')
          this.listQuery.datetime = null
          return
        }
      }
    },
    showDetail(row, column, event) {
      this.detailData = row
      this.dialogVisible = true
    },
    // 导出
    handleExport() {
      this.downloadLoading = true
      const data = underscore.omit(this.listQuery, 'datetime', 'tmBasUlocId', 'searchVins', 'searchMaterialNos')
      // 数据格式化提交
      if (this.listQuery.datetime !== null) {
        data.beginDate = parseTime(this.listQuery.datetime[0], '{y}-{m}-{d}')
        data.endDate = parseTime(this.listQuery.datetime[1], '{y}-{m}-{d}')
      }
      if (this.listQuery.tmBasUlocId.length !== 0) {
        data.tmBasUlocId = this.listQuery.tmBasUlocId[2]
      }
      if (this.listQuery.searchVins) {
        data.searchVins = this.listQuery.searchVins.split(/\s/).filter(a => a !== '')
      }
      if (this.listQuery.searchMaterialNos) {
        data.searchMaterialNos = this.listQuery.searchMaterialNos.split(/\s/).filter(a => a !== '')
      }
      data.page = -1
      data.limit = -1
      fetchList(data).then(res => {
        if (res.code == 200) {
          import('@/vendor/Export2Excel').then(excel => {
            const header = [
              'vin号', '白车身号', '白车身物料号', '油漆车身物料号', '整车物料号', '整车物料描述', '颜色', '车辆公告号', '生产批次号', '生产订单号', '销售类型', '加工类型', '出口国家', 
              '焊装车间代码', '焊装生产线代码', '焊装10过点时间', '焊装20过点时间', '入焊涂BDC时间', '出焊涂BDC时间', 
              '涂装车间代码', '涂装生产线代码', '涂装10过点时间', '涂装20过点时间', '入涂总BDC时间', '出涂总BDC时间', 
              '总装车间代码', '总装生产线代码', '总装10过点时间', '发动机上线时间', '发动机/驱动电机号', '变速箱/电机控制器号', '动力总成/电池合装时间', '总装20点过点时间', '铭牌日期', '合格证日期', '合格证编号', '总装30点入库时间', '生产备注'
            ]
            const keys = [
              'vin', 'frameNo', 'bsMaterialNo', 'psMaterialNo', 'materialNo', 'materialDesc', 'colorCode', 'vehiclePublicNoticeNo', 'batchNo', 'orderNo', 'saleType', 'proType', 'targetountry',
              'hzWorkShopNo', 'hzLineNo', 'hz10Time', 'hz20Time', 'k2Time', 'k12Time', 
              'tzWorkShopNo', 'tzLineNo', 'tz10Time', 'tz20Time', 'p1Time', 'p11Time', 
              'zzWorkShopNo', 'zzLineNo', 'zz10Time', 'engineScanTime', 'engineNo', 'gearBoxNo' , 'powerAssemblyTime', 'zz20Time', 'storageTime', 'certificationTime', 'certification', 'zz30Time', 'procuctionRemark'  
            ]
            const data = this.formatList(res.data, keys).map(v => underscore.values(v))
            excel.export_json_to_excel({
              header,
              filename: '车辆细节' + new Date().valueOf(),
              data
            })
            this.downloadLoading = false
          })
          
        } else {
          this.$message.error('服务器内部错误！');
        }
        this.listLoading = false
      })
    },
    formatList(list, keys) {
      const newList = []
      for (const i of list) {
        const item = {}
        for (const j of keys) {
          if (j === 'saleType') {
            item[j] = saleTypeList.find(a => a.codeValue === i[j]).name
            continue
          }
          if (j === 'proType') {
            item[j] = proTypeList.find(a => a.codeValue === i[j]).name
            continue
          }
          if (j === 'colorCode') {
            item[j] = colorList.find(a => a.codeValue === i[j]).name
            continue
          }
          if (j === 'procuctionRemark') {
            item[j] = i.configurationtableNote + '&&' + i.certificationNode
            continue
          }
          item[j] = i[j]
        }
        newList.push(item)
      }
      return newList
    }
  }
}
</script>
